<template>
  <div>
    <div class="flex">
      <el-input
        v-model.trim="value"
        placeholder="请输入空间标题或空间id"
        @keyup.enter.native="searchSpaces"
      />
      <el-button type="primary" class="m-l-10" @click="searchSpaces" :loading="loading">
        {{ loading ? '' : '搜索' }}
      </el-button>
    </div>
    <div class="custom-table" v-loading="loading">
      <div v-if="exactSpace.id" class="m-t-8">
        <p class="info">精确查找</p>
        <space-box
          v-if="exactSpace.title"
          :space="exactSpace"
          :btn-display="addSpaceBtnDisplay(exactSpace.id)"
          @addSpace="addSpace"
        />
        <div v-if="!exactSpace.title" class="easy-container text-center info">
          没有找到id为
          <span class="el-alert--warning is-light p-x-8">{{ exactSpace.id }}</span>
          的空间
        </div>
      </div>
      <p v-if="exactSpace.id" class="info">其它结果</p>
      <space-box
        v-for="space in spaces"
        :key="space.id"
        :space="space"
        :btn-display="addSpaceBtnDisplay(space.id)"
        @addSpace="addSpace"
      />
      <div v-if="spaces.length === 0" class="easy-container text-center info">暂无数据</div>
      <el-pagination
        layout="prev, pager, next"
        hide-on-single-page
        :current-page="pagination.currentPage"
        :page-count="pagination.pageCount"
        @current-change="searchSpaces"
        class="flex content-center align-items-center"
      />
    </div>
  </div>
</template>

<script>
import SpaceBox from './related-spaces-add-search-result-space-box';
import { formatSpace, formatSpaces } from '../../../format';

export default {
  name: 'related-spaces-add', // 添加关联的空间
  components: { SpaceBox },
  props: {
    curSpaces: { // id数组
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      value: '',
      exactSpace: {},
      spaces: [],
      justAdded: [], // 刚刚点过添加的空间id数组，重新搜索后清空
      loading: false,
      pagination: { // 翻页组件
        currentPage: undefined, // 当前页
        pageCount: undefined, // 总页数
      },
    };
  },
  methods: {
    // 搜索空间
    searchSpaces(page = 1) {
      this.justAdded = [];
      if (this.value.length === 0) {
        this.exactSpace = {};
        this.spaces = [];
        return;
      }
      this.loading = true;
      if (/^[0-9]+$/.test(this.value)) { // 纯数字，精确查找id
        this.$api.spaces.show({ spaceId: this.value })
          .then((res) => { this.exactSpace = formatSpace(res.data); })
          .catch(() => { this.exactSpace = { id: this.value }; });
      } else this.exactSpace = {};
      this.$api.search.fn({
        type: 'Product',
        title: this.value,
        page,
        number: 5, // 限制查询多少个
      }).then((res) => {
        this.spaces = formatSpaces(res.data);
        this.pagination.currentPage = res.kaminari.current_page;
        this.pagination.pageCount = res.kaminari.total_pages;
      }).catch(() => {})
        .then(() => { this.loading = false; });
    },
    // 添加空间
    addSpace(space) {
      const justAdded = this.justAdded.includes(space.id);
      const added = this.curSpaces.map(s => s.id).includes(space.id);
      const unLimited = this.curSpaces.length < 5;
      if (justAdded || added) {
        this.justAdded.splice(this.justAdded.indexOf(space.id), 1);
        this.$emit('revoke', space);
      } else if (unLimited) {
        this.justAdded.push(space.id);
        this.$emit('add', space);
      } else {
        this.$message.warning('群组当前最多关联5个空间');
      }
    },
    // 添加空间按钮的显示
    addSpaceBtnDisplay(id) {
      if (this.justAdded.includes(id)) return { label: '撤销', type: 'info', disabled: false };
      else if (this.curSpaces.includes(id)) return { label: '已添加', type: 'success', disabled: true };
      return { label: '添加', type: 'success', disabled: false };
    },
  },
};
</script>

<style></style>
